---
title: Dot Pattern
date: 2023-07-20
description: A background dot pattern made with SVGs, fully customizable using Tailwind CSS.
author: dillionverma
published: true
video: https://cdn.magicui.design/dot-pattern.mp4
---

<ComponentPreview name="dot-pattern-demo" />

<Steps>

### Installation

Copy and paste the following code into your project.

```text
components/magicui/dot-pattern.tsx
```

<ComponentSource name="dot-pattern" />

</Steps>

## Examples

### Linear Gradient

<ComponentPreview name="dot-pattern-linear-gradient" />

## Props

### Dot Pattern

| Prop      | Type   | Description                   | Default |
| --------- | ------ | ----------------------------- | ------- |
| width     | any    | Width of the dot pattern      | 16      |
| height    | any    | Height of the dot pattern     | 16      |
| x         | any    | X position of the dot         | 0       |
| y         | any    | Y position of the dot         | 0       |
| cx        | any    | X position of the circle      | 1       |
| cy        | any    | Y position of the circle      | 1       |
| cr        | any    | Radius of the circle          | 1       |
| className | string | Class name of the dot pattern | -       |
